<template>
  <view class="home flex column">
    <u-navbar :is-back="true" title="人员配备统计" :title-bold="true" title-color="#000" back-icon-color="#333"></u-navbar>
    <!-- 搜索框 -->
    <picker-item v-model="searchData.customerName" :options="nameList" @change="handleSelectChange" changeValue="id"/>
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one">
      <view class="container-body">
        <person :showRight="false" :customerNo="searchData.customerName"/>
        <professional :customerNo="searchData.customerName"/>
        <professionalMid :customerNo="searchData.customerName"/>
        <five :customerNo="searchData.customerName"/>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import person from '@/pages/practitioner/components/main/person/index.vue'
import professional from './components/professional/index.vue'
import professionalMid from './components/professionalMid/index.vue'
import five from './components/five/index.vue'
import PickerItem from "@/components/pickerItem/pickerItem.vue";
export default {
  components: { PickerItem,person,professional,five,professionalMid},
  data() {
    return {
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      nameList: [],// 搜索下拉的煤矿名称列表
    };
  },
  methods: {
    /**
     * 请求煤矿名称列表
     */
    getOptions() {
      this.nameList = getApp().globalData.coalList;
    },
    /**
     * select选中
     */
    handleSelectChange(val) {
      console.log('teh',val);
      // setTimeout(() => {
      //   this.getData();
      // }, 300);
    },
  },
  onLoad(options) {
    this.getOptions();
    this.searchData.customerName=options.customerNo
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .container {
    padding-bottom: 30rpx;
  }
}
</style>
